<template>
  <transition name="slide">
    <div class="list">
      <van-nav-bar title="西电学术" leftText="返回" rightText="1" leftArrow @click-left="onClickLeft" @click-right="onClickRight" />
      <!-- <div class="scroll-wrapper" :ref="scroll-wrapper">
        <cube-scroll ref="scroll" :data="items" :options="options" @pulling-up="onPullingUp" @pulling-down="onPullingDown"></cube-scroll>
      </div> -->
      
      <ul class="itemWrap">
        <h2>课题：<span>{{ articleList.title }}</span></h2>
        <li class="item">
          <div class="Limg">
            <img v-if="articleList.reporterpic" :src="'http://meeting.xidian.edu.cn/uploads/images/'+articleList.reporterpic" alt="">
            <img v-if="!articleList.reporterpic" src="../../assets/img/xidian.jpg" alt="">
          </div>
          <div class="Rmsg">
            <h3 class="title">{{articleList.title}}</h3>
            <p class="reporter">主讲人：{{articleList.reporter}}</p>
            <p class="time">讲座时间：{{articleList.time}}</p>
            <p class="place">地点：{{ articleList.place}}</p>
          </div>
        </li>
        <p class="article">
          <div v-if="articleList.content" class="content">
            {{ articleList.content }}
          </div>
          <div v-if="!articleList.content" class="content">
            {{ articleList.reporterinfo }}
          </div>
        </p>
      </ul>
      <!-- <router-view></router-view> -->
    </div>
  </transition>
</template>

<script>
import store from "../../common/store";
export default {
  data (){
    return {
      articleList:{}
    }
  },
  methods:{
    onClickLeft () {
      this.$router.go(-1)
      this.$router.beforeEach((to, from, next) => {
        const toDepth = to.path.split('/').length
        const fromDepth = from.path.split('/').length
        if (toDepth < fromDepth) {
          console.log('后退。。。')
          from.meta.keepAlive = false
          to.meta.keepAlive = true
        }
        next()
      })
    },
    onClickRight () {
      this.$router.push('/list/mint-pull')
    }
  },
  created (){
    this.$apis.getArticle(this.$route.query.articleId,store.state.accesskey).then(res => {
      this.articleList = res.msg[0]
      console.log(this.articleList);
      this.articleList.content = this.articleList.content.split('>')[1].split('<')[0]
    })
  }
}
</script>


<style lang="less">
@import  "../../assets/less/baseDetail.less";

.itemWrap{
  height: calc(~'100% - 46px');
  overflow: scroll;
}
.item{
  width: 100%;
  height: 130px;
  margin: 0 auto;
  border-bottom: 1px solid #eee;
}
.item .Limg{
  float: left;
  width: 25%;
  height: 130px;
}
.item .Limg img{
  display: block;
  width: 85%;
  margin: 6% 0 6% 12%;
 
}
.item .Rmsg{
  float: left;
  width: 66%;
  height: 80px;
  margin-left: 3%;
  line-height: 25px;
  margin-top: 10px; 
  font-size: 14px;
 
}
.item .Rmsg p,.item .Rmsg h3{
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item .Rmsg .title{
  color: rgb(18, 145, 248);
}

.itemWrap h2{
  width: 90%;
  font-size: 16px;
  text-align: center;
  line-height: 30px;
  margin: 10px auto;
 
}
.itemWrap h2 span{
  color: rgba(23, 225, 240, 0.897);
}

// .itemWrap .article{
//   width: 100%;
//   margin: 20px auto;
//   text-indent: 2em;
//   font-size: 13px;
//   line-height: 22px;
// }

.itemWrap .content{
  width: 90%;
  text-indent: 2em;
  margin: 20px 5%;
  font-size: 13px;
  line-height: 22px;
}
</style>